<template>
  <div>
    <el-input disabled :value="$route.query.roleName"></el-input>
    
    <el-tree
      style="margin: 20px 0"
      ref="tree"
      :data="allPermissions"
      show-checkbox
      node-key="id"
      default-expand-all
      :props="defaultProps">
    </el-tree>

    <el-button :loading="loading" type="primary" @click="save">保存</el-button>
    <el-button @click="$router.replace({ name: 'Role' })">取消</el-button>
  </div>
</template>

<script>

/**
1. 角色管理 和 树形菜单 是两个页面
2. 树形菜单页面 返回的数据 中和 菜单管理 页面返回的数据几乎一样,唯独有区别加了一个 select 字段 true 代表选中 false 代表未选中
3. data 数组需要 children 属性
    node-key
      代表节点的唯一标识,设置的id,拿数据中的id作为节点的唯一标识
    show-checkbox
      显示多选框
    default-expand-all
      是否展示所有的节点
 */
import permission from '@/api/acl/permission'
import { Message } from 'element-ui'
export default {
  name: "roleAuth",
  data(){
    return{
      loading : false,
      allPermissions: [], // 所有
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    //保存权限列表
    async save(){  
      //  用逗号连接成串
      let ids = this.$refs.tree.getCheckedKeys().join(",");
      this.loading = true;
      try {
        await permission.doAssign(this.roleId,ids)
        // console.log(result);
        this.loading = false
        Message.success('分配角色权限成功')
        // 必须在跳转前获取(跳转后通过this获取不到正确的数据了)
        const roleName = this.$route.query.roleName
        const roles = this.$store.getters.roles;
        //跳转路由（跳转到角色列表页面）
        this.$router.replace('/acl/role/list',()=>{
          // 跳转成功后, 判断如果更新的是当前用户对应角色的权限, 重新加载页面以获得最新的数据
          if(roles.includes(roleName))
          // 刷新当前页面
            window.location.reload()
        })

      } catch (error) {
        console.error(error);
        Message.error('分配权限失败')
      }
      this.loading = false;

    },
    // 获取指定角色的权限菜单
    async getPermissions(roleId){
      try {
        let result = await permission.toAssign(roleId)
        if(result.code == 20000){
          console.log(result);
          this.allPermissions = result.data.children;
          //拿到所有选中的id
          const checkedIds = this.getCheckedIds(this.allPermissions)
          console.log('getPermissions() checkedIds', checkedIds)
          // 获取组件实例
          this.$refs.tree.setCheckedKeys(checkedIds);
        }
      } catch (error) {
        console.error(error);
        Message.error('获取角色权限失败')
      }
    },

    //得到所有选中的id列表
    // 只用得到所有选中的按钮权限数据的id
    getCheckedIds(auths, initArr = []) {
      auths.forEach(item=>{
        // console.log(item);
        if(item.select && item.level === 4){
          initArr.push(item.id)
        }else if(item.children){
          this.getCheckedIds(item.children,initArr)
        }
      })
      return initArr
    },

    
    //页面初始化
    init(){
      const roleId = this.$route.query.id;
      this.getPermissions(roleId)
    }
  },
  

}
</script>

<style scoped>

</style>